<template>
  <div class="login-view">
    <van-nav-bar right-text="帮助" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="img-box"></div>
      <div class="tip">首次登录会自动创建小米账号</div>
      <div class="ipt-box">
        <div class="left">+86 <van-icon name="arrow-down" /></div>
        <div class="right">
          <input type="text" v-model="phone" placeholder="请输入手机号" />
        </div>
        <div class="remove-btn"><van-icon name="cross" /></div>
      </div>
      <div class="to-agree">
        <div class="check-box">
          <van-checkbox v-model="agree" checked-color="#ee0a24"></van-checkbox>
        </div>
        <div class="text-box">
          已阅读并同意<span>《小米商城用户协议》</span
          ><span>《小米商城隐私政策》</span>、<span>《小米账号用户协议》</span
          ><span>《小米账号隐私政策》</span>
        </div>
      </div>
      <div class="get-capte" @click="toGetCap">
        <van-button round type="info" size="large" color="rgb(255,55,0)"
          >获取验证码</van-button
        >
      </div>
      <div class="goto-password">密码登录</div>
      <div class="bottom-area">
        <div class="title">- 其他登录方式 -</div>
        <div class="icon-box">
          <div class="icon" v-for="item in 3" :key="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginView",
  data() {
    return {
      agree: false,
      phone: "",
    };
  },
  methods: {
		onClickLeft() {
			this.$router.go(-1)
		},
    toGetCap() {
      if (!this.agree) {
        this.$toast("请先勾选协议");
      } else {
        let reg =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (!reg.test(this.phone)) {
          this.$toast("请输入正确的手机号格式");
        }else {
          let token = '心心念念黑布林'
          localStorage.setItem('token',JSON.stringify(token))
          this.$router.push({name:'capView'})
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-view {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 10;
  ::v-deep .van-nav-bar__text {
    color: #000;
  }
  ::v-deep .van-nav-bar__arrow {
    color: #000;
  }
  .content {
    padding: 0 20px;
  }
  .img-box {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 999px;
    margin: 50px auto 20px;
  }
  .tip {
    font-size: 14px;
  }
  .ipt-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    height: 60px;
    border-radius: 10px;
    background-color: #f5f5f5;
    position: relative;
    .left {
      font-size: 20px;
      padding: 0 10px;
      ::v-deep .van-icon-arrow-down {
        font-size: 14px;
        position: relative;
        top: -2px;
      }
    }
    .right {
      font-size: 20px;
			input{
				background-color: #f5f5f5;
			}
      input::-webkit-input-placeholder {
        color: rgb(181, 177, 177);
      }
    }
    .remove-btn {
      position: absolute;
      right: 20px;
      line-height: 60px;
      font-size: 18px;
    }
  }
  .to-agree {
    display: flex;
    margin-top: 20px;
    line-height: 16px;
    align-items: center;
    span {
      color: rgb(255, 55, 0);
    }
  }
  .get-capte {
    margin-top: 20px;
  }
  .goto-password {
    margin-top: 50px;
    font-size: 16px;
  }
  .bottom-area {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    .title {
      font-size: 16px;
      color: #888;
    }
    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      position: relative;
      left: 10px;
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        background-color: red;
        margin-right: 25px;
      }
    }
  }
}
</style>